<template>
  <router-link :to='url'>
    <li class='nav_bar_detail-app' :class='{"nav_bar_detail-app_active": isActive}'>
      <span class='bar_title'>{{ title }}</span>
    </li>
  </router-link>
</template>

<script lang='ts'>
import { computed, defineComponent } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'NavBodyItem',
  props: {
    title: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const route = useRoute()
    const isActive = computed(() => route.path.indexOf(props.url) !== -1)
    return {
      isActive
    }
  }
})
</script>

<style scoped>
.nav_bar_detail-app {
  max-width: 135px;
  height: 48px;
  padding: 0 16px;
  align-items: center;
  color: var(--font-color-light);
  cursor: pointer;
  text-overflow: ellipsis;
  list-style: none;
  min-width: 60px;
  text-align: center;
}

.bar_title {
  font-size: 14px;
  line-height: 50px;
}

.nav_bar_detail-app:hover {
  background: var(--bg-hover);
  border-bottom: 3px solid #19A059;
}

.nav_bar_detail-app:active {
  border-bottom: 3px solid #19A059;
  color: var(--color-title);
  font-weight: 500;
}
.nav_bar_detail-app_active {
  border-bottom: 3px solid #19A059;
  color: var(--color-title);
  font-weight: 500;
}
</style>
